<template>
  <div class="testTable">
    <el-table
      :data="students">
      <el-table-column
        prop="sno"
        label="编号"
        width="180">

      </el-table-column>
      <el-table-column
        prop="sName"
        label="姓名"
        width="180">

      </el-table-column>
      <el-table-column
        prop="usex"
        label="性别"
        width="180">

      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  import api from "../../../axios/api"
  export default {
    name: "testmock"
    ,
    data(){
      return{
        students:[]
      }
    },
    methods:{
      initStudentsFromMock: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("https://5ed3144e-625c-41f9-9a7f-52e9a7fafb42.mock.pstmn.io/students", null, "get")
          .then(res => {
            this.students = res;
            console.log(this.students);
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      student:function(sno,sName,usex){
        this.sno=sno;
        this.sName=sName;
        this.usex=usex;
      },
      initStudents:function(){
        this.students= new Array();
        this.students.push(new this.student("0001","张三","男"));
        this.students.push(new this.student("0002","李四","男"));
        this.students.push(new this.student("0003","小李","男"));
      }
    },
    created() {
      this.initStudentsFromMock();
    }
  }
</script>

<style scoped lang="stylus">
  .testTable
    width 500px
    margin 0 auto

</style>
